.__markdown-editor-reactjs-container {
  height: 100%;

  .write-spin {
    width: 100%;
    height: calc(100% - 50px);

    .__markdown-editor-reactjs-markdown-main {
      width: 100%;
      height: 100%;
      display: flex;

      #__markdown-editor-reactjs-edit {
        height: 100%;
        flex: 1;
        float: left;
        border: 0;
        border-right: 1px solid #eee;
        background-color: rgb(248, 248, 250);
        padding: 20px;
        resize: none;
        outline: none;
        box-sizing: border-box;
        font-size: 15px;
      }

      #write {
        height: 100%;
        flex: 1;
        padding: 20px 20px 40px 20px;
        overflow: auto;
        box-sizing: border-box;
      }

      .__markdown-editor-reactjs-toc-layout {
        height: 100%;
        width: 280px;
        position: relative;

        .toc-close-icon {
          width: 22px;
          height: 22px;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          cursor: pointer;
          top: 16px;
          right: 16px;

          &:hover {
            background-color: rgb(245, 245, 245);
          }
        }

        #__markdown-editor-reactjs-toc {
          height: 100%;
          width: 100%;
          box-sizing: border-box;
          padding: 20px;
          overflow: auto;
          border-left: 1px solid #eee;
        }
      }
    }
  }
}
